import React, { ReactNode, useState } from "react";
import ReactDOM from "react-dom";

//
import styles from "./index.module.scss";

type PopupProps = {
  children: ReactNode;
  closer: React.Dispatch<React.SetStateAction<boolean>>;
  title: string;
  onConfirm: () => void;
};

const StoPopup: React.FC<PopupProps> = ({
  children,
  closer,
  title,
  onConfirm,
}) => {
  const popupRoot = document.getElementById("root");

  const hidePopup = () => {
    closer(false);
  };

  return ReactDOM.createPortal(
    // 全局遮罩
    <div className={styles.mask}>
      {/* 弹窗内容 */}
      <div className={styles.modal}>
        {/* 标题区 */}
        <div className={styles.title}>
          {title}
          <button className={styles.btnClose} onClick={hidePopup}>
            X
          </button>
        </div>

        {/* 内容区 */}
        <div className={styles.content}>{children}</div>

        {/* 按钮区 */}
        <div className={styles.btns}>
          <button onClick={()=>closer(false)}>取消</button>

          <button
            onClick={() => {
              onConfirm();
              hidePopup();
            }}
          >
            确定
          </button>

        </div>
      </div>
    </div>,

    popupRoot as HTMLElement
  );
};

export default StoPopup;
